<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ property.name }}</span>
        <span>
          <el-button-group>
            <el-button
              :disabled="$store.state.noAction"
              icon="el-icon-edit"
              size="mini"
              plain
              @click="edit"
            ></el-button>
            <el-popconfirm title="确定删除这个要素吗？" @confirm="del">
              <el-button
                :disabled="$store.state.noAction"
                icon="el-icon-delete"
                size="mini"
                type="danger"
                plain
                slot="reference"
              ></el-button>
            </el-popconfirm>
          </el-button-group>
        </span>
      </div>
      <div>
        <el-form :model="form" ref="form" label-width="60px">
          <el-form-item
            v-if="type != 'xm_building'"
            label="名称"
            prop="name"
            :rules="[{ required: true, message: '名称不能为空' }]"
          >
            <el-input v-model="form.name" :readonly="onlyRead"></el-input>
          </el-form-item>
          <el-form-item
            v-if="type === 'xm_building'"
            label="楼层"
            prop="floor"
            :rules="[{ required: true, message: '名称不能为空' }]"
          >
            <el-input v-model="form.floor" :readonly="onlyRead"></el-input>
          </el-form-item>
          <el-form-item v-show="!onlyRead">
            <el-button type="primary" @click="submitForm()"> 提交 </el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { transact } from "../config/transact";

export default {
  props: ["popupData"],

  data() {
    return {
      feature: null,
      layer: null,
      type: null,
      lonlat: null,
      property: {
        name: null,
      },
      form: {
        name: null,
        floor: null,
      },
      onlyRead: true,
    };
  },

  methods: {
    getFeature(feature) {
      if (this.type == "xm_shoppoint") {
        return feature.getProperties().features[0];
      } else {
        return feature;
      }
    },
    edit() {
      this.onlyRead = false;
    },
    async del() {
      await transact("delete", this.type, this.feature);
      // 成功刷新图层
      let data = {
        layer: this.layer,
        type: this.type,
      };
      this.$store.dispatch("refreshWFS", data);
      this.$parent.delAction();
    },
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.setProperties();

          await transact("update", this.type, this.feature);

          // 成功刷新图层
          let data = {
            layer: this.layer,
            type: this.type,
          };
          this.$store.dispatch("refreshWFS", data);
          this.$parent.delAction();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.onlyRead = true;
      this.setForm();
    },
    setForm() {
      if (this.type === "xm_building") {
        this.form.floor = this.property.floor;
      } else {
        this.form.name = this.property.name;
      }
    },
    setProperties() {
      if (this.type != "xm_building") {
        this.feature.set("name", this.form.name);
      } else {
        this.feature.set("floor", this.form.floor);
      }
    },
    getType() {
      if (this.type === "search") {
        let type = this.feature.getGeometry().getType();
        if (type === "MultiPolygon") {
          this.type = "xm_building";
        }
      }
    },
  },

  watch: {
    popupData() {
      this.type = this.popupData.type;
      this.layer = this.popupData.layer;
      this.feature = this.getFeature(this.popupData.features);
      this.getType();
      this.lonlat = this.popupData.lonlat;
      this.property = this.feature.getProperties();
      this.setForm();
    },
  },
};
</script>

<style scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>